<template>
	<div>
		<HomeSearch></HomeSearch>
		<HomeTab @getPageId="PageId" :pageId="pageId"></HomeTab>
		<div id="homeScroll" class="homeScroll" ref="homeScroll" v-loading="loading">
			<div class="recommend" v-if="pageId==0">
				<HomeRecommend :pageData="pageData"></HomeRecommend>
			</div>
			<div class="activity" v-if="pageId==1">
				<HomeActivity :pageData="pageData"></HomeActivity>
			</div>
			<div class="milkPowder" v-if="pageId==2">
				<HomemilkPowder :pageData="pageData"></HomemilkPowder>
			</div>
			<div class="beauty" v-if="pageId==3">
				<HomeBeauty :pageData="pageData"></HomeBeauty>
			</div>
			<div class="fittings" v-if="pageId==4">
				<HomeFittings :pageData="pageData"></HomeFittings>
			</div>
			<div class="health" v-if="pageId==5">
				<HomeHealth :pageData="pageData"></HomeHealth>
			</div>
			<div class="luxury" v-if="pageId==6">
				<HomeLuxury :pageData="pageData"></HomeLuxury>
			</div>
		</div>
		<tabMenu></tabMenu>
	</div>
</template>
<script>
import BScroll from 'better-scroll'
import {HomeModel} from '../models/homeModel.js'
let homeModel=new HomeModel()
import HomeSearch from '../components/search.vue'
import HomeTab from '../components/homeTab.vue'
import HomeRecommend from '../pages/home/recommend.vue'
import HomeActivity from '../pages/home/activity.vue'
import HomemilkPowder from '../pages/home/milkPowder.vue'
import HomeBeauty from '../pages/home/beauty.vue'
import HomeFittings from '../pages/home/fittings.vue'
import HomeHealth from '../pages/home/health.vue'
import HomeLuxury from '../pages/home/luxury.vue'
import TabMenu from '@/components/tabMenu.vue'  

export default{
	name:'HomePage',
	data(){
		return{
			pageId:0,
			pageData:[],
			loading:false
		}
	},
	components:{
		HomeSearch,HomeTab,HomeRecommend,HomeActivity,HomemilkPowder,HomeBeauty,HomeFittings,HomeHealth,HomeLuxury,TabMenu
	},
	created(){
		// this.pageId=0
		// if(this.pageId==0){
		// 	homeModel.getRecommend().then(res=>{
		// 		this.pageData=res.data.data
		// 	})
		// }
		let pageId=localStorage.getItem(`pageId`)
		let first=true
		if(pageId){
			this.PageId(parseInt(pageId),first)
		}else{
			this.PageId(0,first)
		}
	},
	mounted(){
		this.creatScroll()
	},
	activated(){
		
	},
	methods:{
		PageId(index,first){
			if(this.pageId==index && !first){
				return
			}
			this.pageData=[]
			this.pageId=index
			this.loading=true
			localStorage.setItem(`pageId`,index)
			switch(index){
				case 0:
					homeModel.getRecommend().then(res=>{
						this.pageData=res.data.data
						this.loading=false
					})
				break;
				case 1:
					homeModel.getActivity().then(res=>{
						this.pageData=res.data.data
						this.loading=false
					})
				break;
				case 2:
					homeModel.getmilkPowder().then(res=>{
						this.pageData=res.data.data
						this.loading=false
					})
				break;
				case 3:
					homeModel.getBeauty().then(res=>{
						this.pageData=res.data.data
						this.loading=false
					})
				break;
				case 4:
					homeModel.getFittings().then(res=>{
						this.pageData=res.data.data
						this.loading=false
					})
				break;
				case 5:
					homeModel.getHealth().then(res=>{
						this.pageData=res.data.data
						this.loading=false
					})
				break;
				case 6:
					homeModel.getLuxury().then(res=>{
						this.pageData=res.data.data
						this.loading=false
					})
				break;
			}
		},
		creatScroll(){
			this.$nextTick(() => {
	      if(!this.scroll){
	        this.scroll=new BScroll(this.$refs.homeScroll,{
	        	click: true
	        })
	      }else{
	        this.scroll.refresh()
	      }
	    })
		}
	},
	watch:{
		// PageId(e){
		// 	console.log(e)
		// 	this.creatScroll()
		// }
	}
}
</script>
<style scoped>
.homeScroll{overflow:hidden;position:absolute;left:0;top:95px;right:0;bottom:50px;background:#f7f7f7;}	
.recommend{}
</style>